<template>
   <view>
      <u-navbar title="账号与安全" autoBack fixed placeholder></u-navbar>
      <view class="content">
         <view class="panel">
            <u-cell v-for="(item, index) in items" :key="index" :title="item.name" :value="item.value" :isLink="item.isLink"
            @click="goMenu(item)" :border="false"></u-cell>
         </view >
      </view>
   </view>
</template>

<script>
   import { mapGetters } from 'vuex'
   export default {
      data() {
         return {
            items: [
               {
                  name: 'UID',
                  value: '',
                  isLink: false
               }, {
                  name: '账号',
                  value: '',
                  isLink: false
               }, {
                  name: '身份码',
                  value: '',
                  isLink: true,
                  url: '/pages/tab4/set/safe/qrcode'
               }, {
                  name: '手机绑定',
                  value: '',
                  isLink: true,
                  url: '/pages/tab4/set/safe/phone'
               }, {
                  name: '修改密码',
                  value: '',
                  isLink: true,
                  url: '/pages/authentication/index'
               }
            ]
         }
      },
      computed: {
         ...mapGetters(['id', 'username', 'phone'])
      },
      methods: {
         goMenu(menu) {
            if(menu.url) {
               uni.navigateTo({
                  url: menu.url
               })
            }
         }
      },
      onShow() {
         this.items[0].value = this.id
         this.items[1].value = this.username
         this.items[3].value = this.phone
      }
   }
</script>

<style lang="scss" scoped>
   .content {
      padding: 10px;
      box-sizing: border-box;
   }
   .panel {
      border-radius: 8px;
      overflow: hidden;
   }
</style>
